<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>demo01</title>
    <style type="text/css">
    .box{ width: 100%; height: 1000px; border: 1px solid #8841AB; }
    .grey{ width: 100px; height: 100px; border: 1px solid #DDD; }
    </style>
</head>
<body>
    <div class="box box1">标题1
        <div class="grey grey11">11</div>
        <div class="grey grey12">22</div>
        <div class="grey grey13">33</div>
    </div>
    <div class="box box2">标题2
        <div class="grey grey21">11</div>
        <div class="grey grey22">22</div>
        <div class="grey grey23">33</div>
    </div>
    <div class="box box3">标题3
        <div class="grey grey31">11</div>
        <div class="grey grey32">22</div>
        <div class="grey grey33">33</div>
    </div>
    <div class="box box4">标题4
        <div class="grey grey31">11</div>
        <div class="grey grey32">22</div>
        <div class="grey grey33">33</div>
    </div>
    
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>    
<script>
let controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene({
    offset:1000,
    duration:200,
});
controller.addScene(scene);
scene.on("start",function () {
    console.log("开始了");
});
scene.on("progress",function (event) {
    console.log("过程中" + event.progress);
});
scene.on("end",function () {
    console.log("结束了");
});
scene.setPin(".box2");
</script>
</html>